<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>委托</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #list {
            width: 100px;
            text-align: center;
        }

        #list li {
            background: red;
            margin-bottom: 4px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul id="list">
        <li class="one">1</li>
        <li class="two">2</li>
        <li class="three">3</li>
        <li class="four">4</li>
        <li class="five">5</li>
    </ul>
    <script>
        // document.querySelector("#list").addEventListener('click', function (e) {
        //     if (!Element.prototype.matches) {
        //         Element.prototype.matches = Element.prototype.msMatchesSelector ||
        //             Element.prototype.webkitMatchesSelector
        //     }

        //     var event = e || window.event;
        //     var target = event.target || event.srcElement;
        //     if (target.nodeName.toLowerCase() === 'li' && target.matches('.five')) {
        //         console.log(target.className)
        //         // console.log(target.nodeName)
        //     }
        // })

        var parent = document.querySelector("#list")
        var child = 'li';

        delegateEvent(parent, child, 'click');

        function delegateEvent(parent, child, event) {
            parent.addEventListener(event, function (e) {
                var e = e || window.event;
                var target = e.target || e.srcElement;
                if (target.nodeName.toLowerCase() === child) {
                    console.log(target.innerHTML)
                }
            })
        }
    </script>
</body>

</html>